<template>
  <div class="Invitation">
    <x-header title="邀请有奖" :left-options="{backText:''}" class='whiteHeader'></x-header>
    <div class="InvitationImgs">
    	<img src="../../assets/image/home/invitation.png" alt="" @click='share'/>    	
    	<p>我的邀请码：{{inviteCode}}</p>
    </div>
    <div class="InvitationRemark">
    	<div class="InvitationRemark1">
    		<p>备注说明</p>
    	</div>
    	<div class="InvitationRemark2">
    		<p>1、您的好友通过您的分享的二维码及邀请码，下载APP并注册成功，您将获得车网通平台提供的神秘奖励;</p>
    	</div>
    	<div class="InvitationRemark3">
    		<p>2、成功邀请好友数量越多，所得神秘奖励越多，奖励以最终发放到您在车网通平台账户的实际金额为准;</p>
    	</div>
    	<div class="InvitationRemark4">
    		<p>3、本活动最终解释权归车网通所有。</p>
    	</div>
    </div>
    <div class="share" v-if='showShare'>
      <img src="../../assets/image/sharelog.png" alt="" />
      <div class="shareBtn" @click='iKonw'>知道了</div>
    </div>
    <div class="mask" v-if='showShare'>
      
    </div>
  </div>
</template>
<script>
/*邀请有奖*/
import {XHeader} from 'vux';
import { setCookie, getCookie,appid,GetQueryString,reloads,pushStateUrl} from '../../util/commonUtils';
import wx from 'weixin-js-sdk' //微信jssdk
export default {
  name:"Invitation",
  // 数据
  data(){

    return{
    	userId:'',
    	inviteCode:'',//邀请码
    	inviteUrl:'',//邀请链接
    	showShare:false,//底部弹窗是否可见    	
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    if(sessionStorage.getItem('reload')) {
      sessionStorage.removeItem('reload');
    } else {
      sessionStorage.setItem('reload', 1);
      pushStateUrl();
      reloads();
      return;
    }
    this.userId=getCookie('loginkey');
    this.inviteCode=getCookie('INV_CODE');
    this.inviteUrl=getCookie('INV_URL');
    this.init();
    this.getConfig();      
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
    share(){
      this.showShare=true;
    },
    iKonw(){
      this.showShare=false;
    },
  		//车网通应用宝下载地址 http://a.app.qq.com/o/simple.jsp?pkgname=com.qizhi.carnt
  		//车网通appStore下载地址 https://itunes.apple.com/cn/app/id883127286
    	//分享
    init(){
        let whereFrom=GetQueryString('from');
        if (whereFrom=='singlemessage' || whereFrom=='groupmessage' || whereFrom=='timeline') {
          var u = navigator.userAgent;
          var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
          if(isiOS){
            location.href='https://itunes.apple.com/cn/app/id883127286';
          }else{
            location.href='http://a.app.qq.com/o/simple.jsp?pkgname=com.qizhi.carnt';
          }
        }
    },
    //获取微信的配置信息
    getConfig(){
      let timestamp,nonceStr,signature,appid;
      let title='我在使用车网通客户端，注册可以领取500元代金券';
      let desc=`车网通：让你养车更轻松！扫码下载后注册时输入邀请码${this.inviteCode} ，注册成功即可领取500元代金券。`;
      let imgUrl='http://121.40.78.200/pic/icon/carnt_qrcode.png';
      let linkUrl=location.href;
      this.$fetchPost('/UserWeb/getConfig.action',{'url' : window.location.href},{emulateJSON:true})
      .then(res=>{
        var data = res;
        appid = data.appId;
        timestamp = data.timestamp;
        nonceStr =  data.nonceStr;
        signature = data.signature;
        //console.log(timestamp,nonceStr,signature,appId)        
        wx.config({
            debug : false, // 开启调试模式,false调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId : appid, // 必填，公众号的唯一标识
            timestamp : timestamp, // 必填，生成签名的时间戳
            nonceStr : nonceStr, // 必填，生成签名的随机串
            signature : signature,// 必填，签名，见附录1
            jsApiList : [ 'onMenuShareTimeline', 'onMenuShareAppMessage','chooseWXPay', 'showOptionMenu' ]
        });
        wx.ready(function(){
          // 分享给朋友
          wx.onMenuShareAppMessage({
            title: title,
            desc: desc,
            link: linkUrl,
            imgUrl: imgUrl,
            trigger: function (res) {
            },
            success: function (res) {
            },
            cancel: function (res) {
            },
            fail: function (res) {
              alert(JSON.stringify(res));
            }
          }); 

          //分享朋友圈
          wx.onMenuShareTimeline({
            title: title,
            desc: desc,
            link: linkUrl,
            imgUrl: imgUrl,
            trigger: function (res) {
            },
            success: function (res) {
            },
            cancel: function (res) {
            },
            fail: function (res) {
              alert(JSON.stringify(res));
            }
          });
        })
      },err=>{

      });
    }
    	
  },
  // 子组件
  components:{
    XHeader
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
.Invitation{	
	background:#fff;
  .mask{
    position: fixed;
    top: 0;
    bottom: 0;
    left:0;
    right: 0;
    background: rgba(0,0,0,.8);
    z-index: 9999;
  }
  .share{
    width: 7.5rem;
    height: 5.18rem;
    position: absolute;
    top: 7%;
    right: 0%;
    z-index: 10000;
    img{
      width: 4.48rem;
      height: 4.88rem;
      margin-left: 1.5rem;
    }
    .shareBtn{
      width: 4rem;
      height: 0.8rem;
      font-size: 0.3rem;
      line-height: 0.8rem;
      color: #fff;
      background: #ff0000;
      border-radius: 0.3rem;
      margin: 0.5rem auto;
    }
  }
	min-height:100%;
  .InvitationImgs{
  	width:7.5rem;
  	height:5.1rem;
  	margin:0 auto;  	
  	display:flex;
  	flex-flow:column;
  	position:relative;  
  	background:#f2f2f2;	  	  
  	img{
  		align-self:center;
		  width:6.6rem;  		
		  margin-top:0.4rem;
  	}
  	p{  		  	  		
  		position:absolute;
  		bottom:-1.5rem;
  		left:2.18rem;
  		font-size:0.32rem;
  		color:#fced97;
  	}  	
  }
  .InvitationRemark{  	
  	.InvitationRemark1{  		  		
  		p{
  			font-size:0.28rem;
  			color:#626262;
  			text-align:left;
  			margin-top:2.4rem;
  			margin-left:0.2rem;
  		}
  	}
  	.InvitationRemark2{
  		p{
  			font-size:0.24rem;
  			color:#626262;
  			text-align:left;
  			margin-top:0.2rem;
  			margin-left:0.2rem;
  		}
  	}
  	.InvitationRemark3{
  		p{
  			font-size:0.24rem;
  			color:#626262;
  			text-align:left;
  			margin-top:0.2rem;
  			margin-left:0.2rem;
  		}
  	}
  	.InvitationRemark4{
  		p{
  			font-size:0.24rem;
  			color:#626262;
  			text-align:left;
  			margin-top:0.2rem;
  			margin-left:0.2rem;
  		}
  	}
  }
}
</style>